<template>
  <div class="bg-color">

    <div class="order-detail-header" ref="orderHeader">
      <div class="order-detail-status">
        <p>等待卖家发货</p>
        <p>卖家<count-time v-if="safeguardDetail" :startTime="safeguardDetail.modTime" :totalTime="refundUndeliverTimeout" :timestamp="safeguardDetail.timestamp" endText="已经结束了"></count-time>内未发货，支付金额原路退还至买家</p>
      </div>
      <div>
        <img src="../../../../../static/images/order/wait.png" alt="">
      </div>
    </div>

    <div class="order-address-box" ref="orderAddressBox">
      <div class="order-address-content">
        <div class="order-user-info">
          <span>收货人：{{orderDetail.receiverName}}</span>
          <span>{{orderDetail.receiverMobileNo}}</span>
        </div>
        <p class="order-address-info">
          收货地址：{{orderDetail.addressProvince}} {{orderDetail.addressCity}} {{orderDetail.addressCounty}} {{orderDetail.address}}
        </p>
      </div>
    </div>

    <div class="order-list" ref="orderList">
      <div class="order-title-box">
        <div class="order-title">
          <div class="order-shop">{{orderDetail.shopName}}<img src="../../../../../static/images/order/jiantou.png" alt=""></div>
        </div>
      </div>

      <a href="javascript:;" class="order-pro">
        <div class="order-pro-img" v-if="!orderDetail.productImageUrl"></div>
        <div class="order-pro-img" v-if="orderDetail.productImageUrl" :style="'backgroundImage: url('+(orderDetail.productImageUrl.substr(0,4).toLowerCase() == 'http' ? orderDetail.productImageUrl : resUrl+orderDetail.productImageUrl)+')'"></div>
        <div class="order-pro-name">{{orderDetail.productName}}</div>
        <div class="order-pro-type">
          <img src="../../../../../static/images/order/yikoujia.png" alt="">
        </div>
      </a>

      <div class="order-info-box">
        <div class="order-info">
          <p class="order-price-total">
            <span>买家实付金额</span><span>￥{{orderDetail.needPayMoney | toDecimal}}</span>
          </p>
          <p><span></span><span style="font-size: 0.6rem;color: #999999;">(含邮费 ￥{{orderDetail.postage | toDecimal}})</span></p>
        </div>

        <div class="order-info order-info-input">
          <router-link :to="{name:'express',query:{orderId:orderId,isBuyer:false}}" class="weui-cell weui-cell_access" href="javascript:;">
            <div class="weui-cell__bd">
              {{expressName?expressName:'请选择物流公司'}}
            </div>
            <div class="weui-cell__ft">
            </div>
          </router-link>
          <input class="weui-input" type="text" placeholder="请填写物流单号" v-model="expressNo">
          <div class="textarea-box">
            <textarea class="weui-textarea" placeholder="请填写发货备注 非必填限100字" rows="3" v-model="expressContent"></textarea>
            <div class="weui-textarea-counter"><span>{{contentNum}}</span>/100</div>
          </div>
        </div>
      </div>
    </div>

    <div class="btn-box">
      <button class="weui-btn weui-btn_warn" type="button" @click="subExpressInfo">提交</button>
    </div>


  </div>
</template>

<script>
  import '../../../../assets/css/order.css';
  import {ipconfig} from '../../../../assets/js/ipconfig';
  import {getMyOrderDetail,sellerDelivery} from '../../../../assets/js/getData';
  export default {
    name: "deliverGoods",
    data(){
      return {
        resUrl:ipconfig.resUrl,//图片、视频、音频等资源访问路径
        orderId:null,//订单ID

        expressId:null,//快递公司ID
        expressName:null,//快递公司名
        expressNo:null,//快递单号
        expressContent:'',//发货备注


        orderDetail:{},//订单详情
        safeguardDetail:null,//售后详情

        refundUndeliverTimeout:null,

      }
    },
    created(){
      this.orderId = this.$route.query.orderId;
      this.expressId = this.$route.query.expressId;

      if(this.$route.query.hasOwnProperty('expressName')){
        this.expressName = this.$route.query.expressName;
      }

      getMyOrderDetail(this.orderId).then(res => {
        if(res.data.reqResult.code>0){
          this.orderDetail = res.data.data.data;
          this.refundUndeliverTimeout = res.data.data.refundUndeliverTimeout;//售后超时发货
          if(this.orderDetail.wasSafeguard == 1){
            //获取售后信息
            this.safeguardDetail = this.orderDetail.mordRefundOrderPojo;
          }
        }else {
          Toast(res.data.reqResult.msg);
        }
      })

    },
    computed:{
      contentNum(){
        return this.expressContent.length;
      }
    },
    methods:{
      subExpressInfo(){
        if(!this.expressName){
          Toast('请选择物流公司');
          return;
        }
        if(!this.expressNo){
          Toast('请填写物流单号');
          return;
        }
        if(this.contentNum>100){
          Toast('发货备注最多100字');
          return;
        }
        let params = {
          id:this.orderId,
          expressCompanyId:this.expressId,
          expressName:this.expressName,
          expressNo:this.expressNo,
          expressContent:this.expressContent
        };
        sellerDelivery(params).then(res => {
          if(res.data.reqResult.code > 0){
            Toast('发货成功');
            // this.$router.replace({name:'sellOrderDetail',query:{orderId:this.orderId}});
            this.$router.replace({name:'sellOrder'});
          }else {
            Toast(res.data.reqResult.msg);
          }
        })
      }
    }
  }
</script>

<style scoped>
  .order-list{
    padding-bottom: 0.825rem;
  }
  .order-info-input{
    padding-top: 0.75rem;
  }
  .weui-cell_access{
    border: 1px solid #BFBFBF;
    margin-bottom: 0.75rem;
    height: 1.75rem;
    line-height: 1.75rem;
    padding: 0rem 0.75rem;
  }
  .weui-cell_access:active {
    background-color: #ffffff;
  }
  .weui-cell_access .weui-cell__bd{
    color: #999999;
    font-size: 0.65rem;
  }
  .weui-input{
    border: 1px solid #BFBFBF;
    height: 1.75rem;
    line-height: 1.75rem;
    padding: 0.55rem 0.75rem 0.6rem 0.75rem;
    margin-bottom: 0.75rem;
    box-sizing: border-box;
    color: #999999;
    font-size: 0.65rem;
  }
  .textarea-box{
    border: 1px solid #BFBFBF;
    padding: 0.55rem 0.75rem 0.6rem 0.75rem;
    box-sizing: border-box;
    color: #999999;
    font-size: 0.65rem;
  }
  .btn-box{
    margin-top: 1rem;
    margin-bottom: 0.75rem;
  }
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #999999;
    font-size: 0.65rem;
  }
  input:-moz-placeholder, textarea:-moz-placeholder {
    color: #999999;
    font-size: 0.65rem;
  }
  input::-moz-placeholder, textarea::-moz-placeholder {
    color: #999999;
    font-size: 0.65rem;
  }
  input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #999999;
    font-size: 0.65rem;
  }
</style>

